<template>
  <pad class="recommend">
    <div class="first">
      <div class="l">
        <div class="tit">参与献浆，让我们将爱传递</div>
        <div class="txt">邀请码：{{ userInfo.inviteCode }}</div>
        <div class="txt">扫描二维码，关注我们</div>
      </div>
      <div class="r">
        <img src="./img/qrcode.png" alt class="qrcode" />
      </div>
    </div>
    <div class="second">
      <div class="container">
        <div class="title">献浆的好处</div>
        <div class="item">
          <div class="tit">
            <strong>01</strong>免费的体检
          </div>
          <div class="content">献血浆可以做免费的体检，可以对身体健康问题做到早发现早预防早治疗。</div>
        </div>
        <div class="item">
          <div class="tit">
            <strong>02</strong>献血可以刺激人体的造血功能
          </div>
          <div class="content">让造血功能更加旺盛，从而保持比较旺盛的新陈代谢，不断产生更具活力的年轻细胞。</div>
        </div>
        <div class="item">
          <div class="tit">
            <strong>03</strong>可以预防三高
          </div>
          <div class="content">降低心脑血管疾病的发生率和风湿因子，所以适量献浆是对身体有益无害的。</div>
        </div>
      </div>
      <div class="tips">
        <div class="tit">TIPS:</div>
        <div class="content">献血浆是无害的，血浆及其血浆制品是用来救命和防疫的，血浆是无价的。</div>
      </div>
    </div>
  </pad>
</template>

<script>
import Pad from "@/components/pad";
import { mapGetters } from "vuex";
import wx from "weixin-js-sdk";
import { shareRecommend, shareRecommendCount } from "@/api/user";

export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  components: {
    Pad
  },
  created() {
    const _this = this;
    shareRecommend();
    const link = `https://${location.host}/invite?inviteCode=${_this.userInfo.inviteCode}`;
    wx.ready(function() {
      wx.checkJsApi({
        jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"] // 需要检测的JS接口列表，所有JS接口列表见附录2,
      });

      wx.onMenuShareAppMessage({
        title: "参与献浆,让爱传递", // 分享标题
        desc: "让我们共同参与帮助更多人", // 分享描述
        link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl:
          "http://oss.tjzxsw.com/imgUpload/20191115/jyBloodLicense/58fb88b4-f4be-421d-a121-24c3c7898624.png", // 分享图标
        success: function(res) {
          setTimeout(() => {
            shareRecommendCount();
          }, 800);
        }
      });
      wx.onMenuShareTimeline({
        title: "参与献浆,让爱传递", // 分享标题
        link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl:
          "http://oss.tjzxsw.com/imgUpload/20191115/jyBloodLicense/58fb88b4-f4be-421d-a121-24c3c7898624.png", // 分享图标
        success: function(res) {
          setTimeout(() => {
            shareRecommendCount();
          }, 800);
        }
      });

      // wx.updateAppMessageShareData({
      //   title: "参与献浆,让爱传递", // 分享标题
      //   desc: "让我们共同参与帮助更多人", // 分享描述
      //   link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      //   imgUrl:
      //     "http://oss.tjzxsw.com/imgUpload/20191115/jyBloodLicense/58fb88b4-f4be-421d-a121-24c3c7898624.png", // 分享图标
      //   success:function(res){
      //     setTimeout(() => {
      //       alert(1111)
      //     },200)
      //   }
      // });

      // wx.updateTimelineShareData({
      //   title: "参与献浆,让爱传递", // 分享标题
      //   link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      //   imgUrl:
      //     "http://oss.tjzxsw.com/imgUpload/20191115/jyBloodLicense/58fb88b4-f4be-421d-a121-24c3c7898624.png", // 分享图标
      //   success(){
      //     setTimeout(() => {
      //       alert(1111)
      //     },200)
      //   }
      // });
    });
  }
};
</script>
<style lang='scss'>
.recommend {
  background-color: #fc5859;

  %layout {
    padding: 0.48rem /* 36/75 */;
    background-color: #fff;
    border-radius: 0.266667rem /* 20/75 */;
  }

  .first {
    @extend %layout;
    display: flex;
    height: 3.2rem /* 240/75 */;
    margin-bottom: 0.4rem /* 30/75 */;
    .l {
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: center;
    }
    .tit {
      color: #0055e0;
      font-size: 0.48rem /* 36/75 */;
      font-family: Adobe Heiti Std R;
      font-weight: 400;
      margin-bottom: 0.213333rem /* 16/75 */;
    }
    .txt {
      color: #0055e0;
      opacity: 0.4;
      font-size: 0.32rem /* 24/75 */;
      margin-bottom: 0.213333rem /* 16/75 */;
    }
    .qrcode {
      width: 2.266667rem /* 170/75 */;
      height: 2.266667rem /* 170/75 */;
    }
  }

  .second {
    @extend %layout;
    padding-top: 0.773333rem /* 58/75 */;
    margin-bottom: 0.4rem /* 30/75 */;
    .container {
      position: relative;
      width: 8.133333rem /* 610/75 */;
      border: 0.053333rem /* 4/75 */ solid #fc5859;
      margin: 0 auto 0.426667rem /* 32/75 */ auto;
      padding: 0.426667rem /* 32/75 */;
      padding-top: 1.093333rem /* 82/75 */;
      border-radius: 0.266667rem /* 20/75 */;
      .title {
        position: absolute;
        left: 50%;
        top: -0.56rem /* 42/75 */;
        transform: translate(-50%, 0);
        text-align: center;
        width: 4.266667rem /* 320/75 */;
        height: 1.12rem /* 84/75 */;
        line-height: 1.12rem /* 84/75 */;
        background-color: #fc5859;
        font-size: 0.533333rem /* 40/75 */;
        color: #fff;
        border-radius: 0.56rem /* 42/75 */;
      }
      .item {
        margin-bottom: 0.56rem /* 42/75 */;
        strong {
          color: #fc5859;
          font-size: 0.8rem /* 60/75 */;
          margin-right: 0.4rem /* 30/75 */;
        }
        .tit {
          color: #2285ff;
          font-size: 0.4rem /* 30/75 */;
          margin-bottom: 0.24rem /* 18/75 */;
          display: flex;
          align-items: center;
        }
        .content {
          font-size: 0.32rem /* 24/75 */;
          color: #2285ff;
          opacity: 0.4;
          line-height: 0.533333rem /* 40/75 */;
        }
      }
    }
    .tips {
      .tit {
        font-size: 0.4rem /* 30/75 */;
        color: #fc5859;
        margin-bottom: 0.426667rem /* 32/75 */;
      }
      .content {
        font-size: 0.32rem /* 24/75 */;
        color: #fc5859;
        line-height: 0.533333rem /* 40/75 */;
      }
    }
  }
}
</style>
